
<template>
  <wd-popup position="bottom" v-model="show">
    <PageLayout
      navTitle="选择收货地址"
      type="popup"
      navRightText="确定"
      @navRight="handleConfirm"
      @navBack="handleCancel"
    >
      <view class="wrap">
        <view class="add-current" @click="handleAdd">
          <text class="add-icon">+</text>
          <text class="add-text">新增地址</text>
        </view>
        <z-paging
          ref="paging"
          :fixed="false"
          v-model="dataList"
          @query="queryList"
          :default-page-size="15"
        >
          <template v-for="(item, index) in dataList" :key="item.id">
            <wd-swipe-action class="list-item">
              <view
                :class="selectAddress?.id === item.id ? 'is-select' : ''"
                @click="onSelectAddress(item)"
                class="list"
              >
                <view class="box" :style="getBoxStyle">
                  <view class="field ellipsis">{{ item.userId }}</view>
                  <view class="value cu-text-grey">{{ item.mob }}</view>
                </view>
                <view class="box" :style="getBoxStyle">
                  <view class="field ellipsis">{{ item.address }}</view>
                </view>
                <hr />
                <view class="button-group">
                  <view class="default-address" v-if="index === 0">默认收货地址</view>
                  <view class="edit-button button" @click="handleEdit(item)">编辑</view>
                  <view class="delete-button button" @click="handleAction('del', item)">
                    删除地址
                  </view>
                </view>
              </view>
            </wd-swipe-action>
          </template>
        </z-paging>
      </view>
    </PageLayout>
  </wd-popup>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { http } from '@/utils/http'
import usePageList from './hooks/usePageList'
defineOptions({
  name: 'SelectAddress',
  options: {
    styleIsolation: 'shared',
  },
})
const props = defineProps({
  url: {
    type: String,
    default: '',
    required: true,
  },
  EditPageName: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['confirm', 'close'])
// 分页加载配置
const { toast, router, paging, dataList, queryList } = usePageList(props.url)

const selectAddress = ref(null)
const show = ref(false)

onShow(() => {
  queryList(1, 10)
})

const open = () => {
  show.value = true
  queryList(1, 10)
}

const onSelectAddress = (item) => {
  if (selectAddress.value?.id === item.id) {
    selectAddress.value = null
    return
  }
  selectAddress.value = item
}

// 样式
const getBoxStyle = computed(() => {
  return { width: 'calc(33% - 5px)' }
})

// 其他操作
const handleAction = (val, item) => {
  if (val === 'del') {
    http.delete('/seedOil/growsAddress/delete?id=' + item.id, { id: item.id }).then((res) => {
      toast.success('删除成功~')
      paging.value.reload()
    })
  }
}

// go 新增页
const handleAdd = () => {
  router.push({
    name: 'GrowsAddressForm',
  })
}

// go 编辑页
const handleEdit = (record) => {
  router.push({
    name: 'GrowsAddressForm',
    params: { dataId: record.id },
  })
}

const handleClose = () => {
  setTimeout(() => {
    emit('close')
  }, 400)
}
const handleConfirm = () => {
  console.log('selectAddress:::', selectAddress.value)
  if (!selectAddress.value) {
    // toast.warning('还没选择~')
    uni.showToast({
      title: '还没选择~',
      icon: 'error',
      duration: 2000,
    })
    return
  }
  show.value = false
  emit('confirm', selectAddress.value) // 确定返回选中的地址
  handleClose()
}
const handleCancel = () => {
  show.value = false
  handleClose()
  console.log('取消了~')
}

onMounted(() => {
  // 监听刷新列表事件
  uni.$on('refreshList', () => {
    queryList(1, 10)
  })
})
defineExpose({
  open,
})
</script>
    
<style lang="scss" scoped>
.wrap {
  height: 100%;
}
:deep(.wd-swipe-action) {
  margin: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 1.5px 1.5px 7px #ccc;
}
.list-item {
  .is-select {
    border: 1px solid #506bff;
    border-radius: 10px;
    overflow: hidden;
  }
}

.list {
  padding: 10px 10px;
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .box {
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    .field {
      margin-bottom: 10px;
      line-height: 20px;
    }
  }
}

.button-group {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  .default-address {
    color: #88cf65;
    border: 1px solid #88cf65;
    padding: 3px 5px;
    flex: 1;
    text-align: center;
  }
  .button {
    padding: 5px;
    border-radius: 20px;
    // border: 2px solid #ccc;
    flex: 1;
    text-align: center;
  }
  .edit-button {
    background-color: #506bff;
    color: white;
  }
  .delete-button {
    background-color: rgb(255, 80, 80);
    color: white;
  }
}
.action {
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: #fff;
    &:first-child {
      background-color: #fa4350;
    }
  }
}
.add-current {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background-color: #fff;
  margin: 10px;
  box-shadow: #ccc 1.5px 1.5px 7px;
  border-radius: 10px;
  .add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #999;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 18px;
    color: #ccc;
  }
  .add-text {
    font-size: 16px;
    color: #333;
  }
}
hr {
  margin: 10px;
  height: 1px;
  border: none;
  background-color: #ccc;
}
</style>
    